<template>
  <div>


	<myheader></myheader>

	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3">
						<img :src="mysrc" class="img-fluid">
					</div>
					<div class="product-thumbnails">

						<img v-for='img in re' @click="changeimg(img)" class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" >

						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg"></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a></div>
				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
					<h2 class="mb-3 mt-0">{{ info.name }}</h2>
					<p class="lead mt-2 mb-3 primary-color">${{ info.price }}</p>

					颜色:{{ param.color }}

					<br>

					号码:{{ param.size }}

					<br>

					季节：{{ param.season }}

					<br>

					<!-- <Pagination v-model='pagination' @change='change' layout="pager,jumper" small></Pagination> -->

					<h5 class="mt-4">Description</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis velit vestibulum massa sollicitudin auctor. Cras ac venenatis orci. Ut consequat, purus ut ultrices ultricies, nisi sem ornare quam, sed ultricies mi nisl sit amet purus.</p>
					<p>Suspendisse potenti. Nunc in libero luctus, sagittis leo sit amet, volutpat lacus. Quisque a porta risus. Integer aliquet nibh vitae vestibulum accumsan</p>
					<h5 class="mt-5">Care Instructions</h5>
					<p>Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
					<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
						<option value="2">Medium</option>
						<option value="3">Large</option>
					</select>




					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->

					<a href="#" class="btn btn-full-width btn-lg btn-outline-primary">Add to cart</a>

					<br>
					<br>
					<br>
					<!--商品评论-->

					<textarea v-model="comment" rows="10" v-autosize v-wordcount="100">

					</textarea>

					<br>
					<br>
					<Button @click="submit" color="blue">提交评论</Button>

					<br>
					<br>

						<!--评论列表-->
					<ul>
						<li v-for="item in commentlist">
							{{ change_uid(item.uid) }}:{{ item.content }}
						</li>
					</ul>

					</div>







			</div>
		</div>
	</section>

	<div class="divider"></div>

	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>

				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
			</div>
		</div>
	</section>



	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>


	</footer>

  </div>

</template>



<script>

//导入组件
import myheader from './myheader'

export default {
  data () {
    return {
	  msg: "这是一个变量",
	//建立小图列表
	  re:[],
	  //商品id
	  id:'',
	  //商品详情
	  info:{},
	  //商品规格
	  param:{},
	  //图片地址
	  mysrc:'',
	  //声明评论内容
	  comment:'',
	  //评论列表
	  commentlist:[],
		//用户信息列表
	  myuser:{},


    }
  },

	// filters:{

	// 			//自定义方法
	// 	myfilter:function(value){

	// 			if(value == 1)
	// 			return '小王'

	// 			if(value == 2)
	// 			return '小明'

	// 			if(value == 12)
	// 			return '迩旳様孑'

	// 			else
	// 			return '田帅康'
				
				

	// 	}


	// },




    //注册组件标签
  components:{
	  'myheader':myheader,


  },
  mounted:function(){

	  //获取商品id

	  this.id = this.$route.query.id;

		//获取商品信息
	  this.get_good();

	  //获取商品评论
	  this.get_comment();

	  //调用用户信息
	  this.get_user();




},
  methods:{

	    //替换用户名
  	change_uid:function(uid){

  		return this.myuser[uid];

  	},


	//   获取用户信息   替换评论ID
	  get_user:function(){

		  	//发送请求
		this.axios.get('http://localhost:8000/getusers/').then((result) =>{

				  console.log(result);

			//将用户信息列表循环  重新赋值替换
          for(let i=0;i<result.data.length;i++){

              this.myuser[result.data[i]['id']] = result.data[i]['username'];

          }

		
			


      });
	  

	  },

	  //获取商品评论
	  get_comment:function(){

			//发送请求
			this.axios.get('http://localhost:8000/commentlist/',{params:{gid:this.id}}).then((result) =>{

			console.log(result);

			//赋值 后端传给前端空列表
			this.commentlist = result.data.data;

			


			});




	  },

	  //提交评论
	  submit:function(){
		  if(this.comment==""){

			  this.$Message('评论不能为空');
			  return false
		  }

		  this.comment = this.comment.replace(/ /g,'');

		  if(this.comment.length > 100){

			  this.$Message('超出字数限制');
			  return false
		  }

		  //请求入库
  		//发送请求
      this.axios.post('http://localhost:8000/commentinsert/',this.qs.stringify({uid:localStorage.getItem("uid"),gid:this.id,content:this.comment})).then((result) =>{

        console.log(result);

        this.$Message(result.data.message);

		//在提交时调用接口 刷新网页   将评论实时更新到页面
		// this.get_comment();

		//添加评论数据 伪数据提交  是否入库成功 都可以展示出来   假数据刷新页面就不会显示了
		this.commentlist.unshift({'uid':localStorage.getItem('uid'),'content': this.comment});


      });


  	},



	  //更换大图
	  changeimg:function(img){

		  console.log(img);

		  this.mysrc = 'http://localhost:8080/static/img/'+img



	  },


	  //获取商品详情
	  	//获取商品
     get_good:function(){

                     //请求后台接口
		  this.axios.get('http://127.0.0.1:8000/goodinfo/',{params:{id:this.id}}).then((result)=>{



				this.info = result.data.data;

				//空列表接收小图参数
				this.re = result.data.re

				//图片地址赋值
				this.mysrc = 'http://localhost:8000/static/upload/'+ this.info.img;

				//将json类型转换
				this.param = JSON.parse(this.info.params);



			});




     },



  }
}


</script>

<style>
.img-fluid{
	cursor: pointer;
}


</style>
